Drawing a background map is the first step of any geospatial analysis. Once this background is available, you can color each region to get a choropleth map, add points or bubble to get a bubble map, reshape the region to get a cartogram, or show connection with a connection map.
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = false
<-- Create the configuration for the graph -->
var config = {
"colorBy":"name",
"decorations":{
"connections":[
{
"color":"red",
"source":[
40.7,
"-74"
],
"target":[
37.7,
"-122"
],
"type":"spline"
},
{
"color":"red",
"source":[
40.7,
"-74"
],
"target":[
25.7,
-80.1
],
"type":"spline"
},
{
"color":"red",
"source":[
37.7,
"-122"
],
"target":[
25.7,
-80.1
],
"type":"splineDashed"
}
],
"marker":[
{
"color":"blue",
"coords":[
40.7,
"-74"
],
"label":"New York",
"shape":"teardrop",
"size":5
},
{
"color":"blue",
"coords":[
37.7,
"-122"
],
"label":"San Francisco",
"shape":"teardrop",
"size":5
},
{
"color":"blue",
"coords":[
25.7,
-80.1
],
"label":"Miami",
"shape":"teardrop",
"size":5
},
{
"color":"green",
"coords":[
41.8,
-87.6
],
"label":"Chicago",
"shape":"circle",
"size":4
},
{
"color":"green",
"coords":[
36.1,
-115.1
],
"label":"Las Vegas",
"shape":"circle",
"size":3
},
{
"color":"black",
"coords":[
42.3,
"-71"
],
"label":"Boston",
"shape":"star",
"size":6
}
]
},
"graphType":"Map",
"mapConfig":{
"center":[
"-90",
"30"
]
},
"mapGraticuleShow":"true",
"mapGraticuleType":"solid",
"mapId":"worldCountries",
"mapProjection":"orthographic",
"showLegend":"false",
"title":"Ortographic Projection",
"topoJSON":"https://www.canvasxpress.org/data/worldLow.json"
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
</script>
library(canvasXpress) canvasXpress( data=FALSE, colorBy="name", decorations=list(connections=list(list(color="red", source=list(40.7, -74), target=list(37.7, -122), type="spline"), list(color="red", source=list(40.7, -74), target=list(25.7, -80.1), type="spline"), list(color="red", source=list(37.7, -122), target=list(25.7, -80.1), type="splineDashed")), marker=list(list(color="blue", coords=list(40.7, -74), label="New York", shape="teardrop", size=5), list(color="blue", coords=list(37.7, -122), label="San Francisco", shape="teardrop", size=5), list(color="blue", coords=list(25.7, -80.1), label="Miami", shape="teardrop", size=5), list(color="green", coords=list(41.8, -87.6), label="Chicago", shape="circle", size=4), list(color="green", coords=list(36.1, -115.1), label="Las Vegas", shape="circle", size=3), list(color="black", coords=list(42.3, -71), label="Boston", shape="star", size=6))), graphType="Map", mapConfig=list(center=list(-90, 30)), mapGraticuleShow=TRUE, mapGraticuleType="solid", mapId="worldCountries", mapProjection="orthographic", showLegend=FALSE, title="Ortographic Projection", topoJSON="https://www.canvasxpress.org/data/worldLow.json" )